<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>$slots渲染函数</title>
</head>
<body>
  <div id="app">
    <my-com>
      <template #default>1111</template>
      <template #footer>2222</template>
    </my-com>
  </div>
</body>
<template id="com">
  <div class="content2222"><slot>默认值</slot></div>
  <div class="footer222"><slot name="footer">底部默认值</slot></div>
</template>
<script src="../lib/vue.global.js"></script>
<script>
  const { createApp, h } = Vue // h 代表创建一个元素 createElement

  const Com = {
    // template: '#com',
    render () {
      console.log(this.$slots)
      return [
        h('div', { class: 'content'}, this.$slots.default()), // <div class="content"><slot></slot></div>
        h('div', { class: 'footer'}, this.$slots.footer()) // <div class="footer"><slot name="footer"></slot></div>
      ]
    }
  }

  const app = createApp({
    components: {
      MyCom: Com
    }
  })

  app.mount('#app')
</script>
</html>